<template>
    <div ref="eImageRefCover" :class="['d-i-b o-h', radius ? 'b-r-50' : '']" @click="handleClick">
        <img
            :class="['e-image', viewer ? 'el-image-viewer' : '', ...otherClass]"
            ref="eImageRef"
            :lazy="lazy"
            :src="srcComputed"
            :alt="alt"
            :title="title"
            :style="getStyle"
            @error="handleError($event)"
        />

        <eImageViewer v-if="visible" :url-list="[src]" />
        <moveTo v-if="visible">
            <i class="el-icon-close e-image-close-icon" @click="handleClose"></i>
        </moveTo>
    </div>
</template>

<script>
import { defaultSrc } from '@/plugins/config.js'
import moveTo from '@/components/moveTo/index.vue'
export default {
    components:{
        moveTo
    },
    props: {
        viewer: {
            type: Boolean,
            default: false,
        },
        alt: {
            type: String,
            default: 'blog图片',
        },
        title: {
            type: String,
            default: 'blog图片title',
        },
        fit: {
            type: String,
            default: 'cover',
        },
        src: {
            type: String,
            default: defaultSrc,
        },
        lazy: {
            type: Boolean,
            default: true,
        },
        'scroll-container': {
            type: String,
            default: '.el-dialog__body',
        },
        // 特殊预览
        previewA: {
            type: Boolean,
            default: false,
        },
        preview: {
            type: Boolean,
            default: false,
        },
        // 圆形
        radius: {
            type: Boolean,
            default: false,
        },
        zIndex: {
            type: Number,
            default: 1000,
        },
        width: {
            type: Number || String,
            default: 0,
        },
        height: {
            type: Number || String,
            default: 0,
        },
        style: {
            type: Object,
            default: function () {
                return {}
            },
        },
        otherClass: {
            type: Array,
            default: () => [],
        },
        mix: {
            // 生成几倍图
            type: Number,
            default: 1,
        },
        errText: {
            type: String,
            default: '',
        },
        errFontSize: {
            type: Number,
            default: 30,
        },
    },

    data() {
        return {
            visible: false,
            previewList: [],
            srcComputed: defaultSrc, // 如果赋值为空，会进入err
            oldWidth: 0,
            oldHeight: 0,
        }
    },
    computed: {
        ...Vuex.mapState(['userdata']),
        getStyle() {
            let result = {}

            if (this.width) {
                result.width = `${this.width}px`
            }
            if (this.height) {
                result.height = `${this.height}px`
            }

            return {
                ...result,
                ...this.style,
            }
        },
    },
    watch: {
        src: {
            handler() {
                this.init()
            },
            immediate: true,
        },
        'userdata.provincial_flow_type': {
            handler() {
                this.init()
            },
        },
    },
    methods: {
        handleClose(){
            this.visible = false
            
        },
        async init() {
            await this.$nextTick()
            const { eImageRef } = this.$refs
            if (!eImageRef) return
            if (this.lazy) {
                let ob = new IntersectionObserver(async (entries) => {
                    let enter = entries[0]
                    if (enter.isIntersecting) {
                        await this.getSrc()
                        $(eImageRef).css({
                            opacity: 1,
                        })
                        ob.unobserve(eImageRef)
                    }
                })
                ob.observe(eImageRef)
            } else {
                $(eImageRef).css({
                    opacity: 1,
                })
                this.srcComputed = this.src
            }
        },
        async getSrc() {
            // 当前节点在可视区
            if (this.userdata.provincial_flow_type == 1) {
                this.srcComputed = this.src
                return
            }
            await this.handleError(false)
        },
        async handleError(e) {
            let { width, height, mix } = this
            if (e === false) {
                await this.$nextTick()
            }

            if (!width || !height) {
                await this.$nextTick()
                // 获取父级的width,height
                const parent = $(this.$refs.eImageRefCover)?.parent()
                if (parent) {
                    width = parent.width()
                    height = parent.height()
                }

                // 获取自己的宽高
                if (!width || !height) {
                    const { clientWidth, clientHeight } = this.$refs.eImageRefCover || {}
                    width = clientWidth
                    height = clientHeight
                }
            }
            if (!width || !height) {
                if (this.oldWidth && this.oldHeight) {
                    width = this.oldWidth
                    height = this.oldHeight
                }
            }
            if (!width || !height) {
                this.srcComputed = defaultSrc
                return
            }

            // 保留历史宽高，在切换页面刷新时有用
            this.oldWidth = width
            this.oldHeight = height
            this.srcComputed = await this.createCanvasImg({
                width: width * mix,
                height: height * mix,
                fontContent: this.errText,
                fontSize: this.errFontSize,
            }).catch((err) => {
                this.Toast(err)
                // 生成图片失败，使用默认图片
                this.srcComputed = defaultSrc
            })
        },
        handleClick() {
            if (this.preview) {
                this.visible = true
            }
            if (this.previewA) {
                this.prevewImg(this.$refs.eImageRef, this.zIndex)
            }

            this.$emit('click')
        },
    },
}
</script>

<style lang="scss" scoped>
.el-image-cover {
    width: 100%;
    height: 100%;
}
.e-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
}
.e-image-close-icon{
    position: fixed;
    z-index:3000;
    top: 40px;
    right: 40px;
    font-size: 40px;
}
</style>
